<template>
<div class="father">
    <h3>父组件</h3>
    <p class="container">
        <Category title="今日热门游戏">
            <ul>
                <li v-for="g in games" :key="g.id">{{ g.name }}</li>
            </ul>
        </Category>
        <Category title="今日美食城市">
            <img width="100%" :src="imgUrl"/>
        </Category>
        <Category title="今日影视推荐">
            <video video :src="videoUrl" controls></video>
        </Category>
    </p>
    <p class="container">
        <GameCategory v-slot="params">
            <ul>
                <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
            </ul>
        </GameCategory>
        <GameCategory v-slot:default="params">
            <ol>
                <li v-for="g in params.games" :key="g.id">{{ g.name }}</li>
            </ol>
        </GameCategory>
        <GameCategory #default="{games}">
            <h4 v-for="g in games" :key="g.id">{{ g.name }}</h4>
        </GameCategory>
    </p>
    <p>将组件间共享的数据交给【集中式状态管理】</p>
</div>
</template>

<script lang="ts" setup name="Father">
import { ref } from 'vue';
import Category from './Category.vue'
import GameCategory from './GameCategory.vue'
let games = [
    {id:'g00001',name:'王者荣耀'},
    {id:'g00002',name:'上古王冠'},
    {id:'g00003',name:'红色警戒'},
    {id:'g00004',name:'冰封王座'},
]
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>

<style scoped>
.father{
    background-color: rgb(164, 164, 164);
    padding: 20px;
    border-radius: 10px;
}
.container{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
</style>